<!-- 示例核心代码(3/3) -->
<template>
    <el-dialog class="ba-operate-dialog" v-model="baTable.table.extend!.showInfo" width="50%">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">详情</div>
        </template>

        <el-scrollbar  class="ba-table-form-scrollbar">

        <div v-loading="baTable.table.extend!.infoLoading" class="info-box ba-markdown">
            <div v-if="baTable.table.extend!.infoData">


                <el-steps style="max-width: 100%;margin-bottom: 15px;margin-top: -25px;" :active="baTable.table.extend!.infoData.step_num" align-center  finish-status="success" >
                    <el-step v-for="(item, index) in baTable.table.extend!.infoData.step_array" :title="item.title"  />
                </el-steps>

                <el-descriptions
                    class="margin-top"
                    :column="2"
                    size="default"
                    border
                >

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                用户
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData?.user?.nickname}} ( id:{{baTable.table.extend!.infoData?.user_id}} )
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                订单号
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.order_no}}
                    </el-descriptions-item>
<!--                    <el-descriptions-item>-->
<!--                        <template #label>-->
<!--                            <div class="cell-item">-->
<!--                                支付单号-->
<!--                            </div>-->
<!--                        </template>-->
<!--                        {{baTable.table.extend!.infoData.pay_order_no}}-->
<!--                    </el-descriptions-item>-->




                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                配送方式
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData?.send_style == 1 ? '邮寄' : '自提' }}
                    </el-descriptions-item>


                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                收货人
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData?.name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                联系电话
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData?.mobile}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                收货地址
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData?.province}} - {{baTable.table.extend!.infoData?.city}} - {{baTable.table.extend!.infoData?.area}}

                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                详细地址
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData?.address}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                订单金额
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.order_money}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                商品金额
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.goods_money}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                运费
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.pay_freight_money}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                会员优惠
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.vip_money}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                支付金额
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.pay_price}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                订单生成时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.create_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                支付时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.pay_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                备货时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.prepare_time}}
                    </el-descriptions-item>


                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                发货时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.deliver_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                收货/自提时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.receive_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                取消类型
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.cancel_type_text }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                取消时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.cancel_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                用户备注
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.user_remarks}}
                    </el-descriptions-item>







                </el-descriptions>

                <div class="titles">
                    订单商品
                </div>
                <el-table :data="baTable.table.extend!.infoData?.goods" border style="width: 98%">
                    <el-table-column prop="name" label="商品"  />
                    <el-table-column prop="sku_name" label="规格" width="100" />
                    <!--                    <el-table-column prop="price" label="原价" width="180" />-->
                    <el-table-column prop="price" label="实付价" width="100" />
                    <el-table-column prop="num" label="数量" width="100" />
                    <el-table-column prop="valid_num" label="有效数量" width="100" />
                    <el-table-column prop="total_price" label="小计" width="100" />
                    <!--                    <el-table-column prop="after_text" label="退款售后" width="100" />-->
                </el-table>


                <div class="titles" v-if="baTable.table.extend!.infoData?.send_style == 1">
                    快递单号
                </div>
                <el-table v-if="baTable.table.extend!.infoData?.send_style == 1" :data="baTable.table.extend!.infoData?.express_data" border style="width: 100%;margin-bottom: 15px;">
                    <el-table-column prop="name" label="快递公司"  />
                    <el-table-column prop="no" label="快递单号" />

                </el-table>

            </div>

        </div>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { timeFormat } from '/@/utils/common'
import type baTableClass from '/@/utils/baTable'

const baTable = inject('baTable') as baTableClass
</script>

<style scoped lang="scss">
:deep(.ba-markdown table) {
    margin-bottom: 0px !important;
}
.info-box {
    margin-top: 60px;
    div {
        width: 100%;
        text-align: center;
    }
    .mt-40 {
        margin-top: 40px;
    }
}
.titles{
    margin-top: 15px;
    display: flex;
    text-align: center;
    font-weight: 900;
    color: var(--el-text-color-regular);
    height: 35px;
    align-items: center;
    justify-content: center;
}
:deep(.ba-markdown table tr:hover){
    background-color: inherit ;
}
</style>
